<template>
	<view class="page-view flex flex-direction">
		<view class="topwrap">
			<!-- <lee-search @confirm="confirm" @clear="clear" :iconSrc="iconSrc" :inputAttr="inputAttr"></lee-search> -->
		</view>
		<view class="account-list flex-sub">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
				<userItem :isChange="isChange" :info="item" v-for="(item, index) in accountList" :key="index"></userItem>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { getAccountUserList } from '@/service/api.js';
import userItem from './components/userItem.vue';
// import leeSearch from '@/components/lee-search/lee-search.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			isChange: false,
			inputAttr: {
				placeholderText: '请输入就诊人姓名/手机号码',
				height: 70,
				getBorderRadius: 50
			},
			iconSrc: {
				voice: '/static/lee-search/icon_voice.png',
				logo: '/static/lee-search/icon_search@2x.png',
				clear: '/static/lee-search/icon_clear.png'
			},
			seachName: '',
			accountList: [],
			downOption: {
				auto: true // 不自动加载
			},
			upOption: {
				auto: true // 不自动加载
			}
		};
	},
	computed: {
		...mapState(['userInfo', 'curAccount'])
	},
	components: {
		userItem,
		// leeSearch
	},
	onLoad(options) {
		this.isChange = options.isChange && options.isChange == 1;
		uni.setNavigationBarTitle({
			title: this.isChange ? '今日随访用户' : '所有随访用户'
		});
	},
	onShow() {
		this.getAccountList();
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.userInfo.userId) {
			this.getAccountList();
		}
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 300);
	},
	methods: {
		...mapMutations(['$uStore']),
		confirm(keyword) {
			this.seachName = keyword;
			this.getAccountList();
			console.log('info', keyword);
		},
		clear() {
			this.seachName = '';
			this.getAccountList();
		},
		changeAccount(info) {
			if (this.isChange) {
				this.$uStore({
					name: 'curAccount',
					value: info
				});
				uni.navigateBack();
			} else {
				uni.navigateTo({
					url: '/pages/login/regInfo?detailId=' + info.detailId
				});
			}
		},
		//设置首页病人信息
		setCurrentHospPatientInfo() {
			this.$postAction(this.$api.setCurrentHospPatientInfo, {
				patientId: this.curAccount.patientId
			});
		},
		upCallback() {
			this.getAccountList();
		},
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		async getAccountList() {
			let accountList = [];
			if (this.isChange) {
				let list = await this.getplanList();
				accountList = [...this.accountList, ...list];
			} else {
				accountList = await getAccountUserList(this.userInfo.userId, {
					seachName: this.seachName
				});
			}
			this.accountList = accountList;
		},
		getplanList() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				pageNum: pageNum,
				pageSize: pageSize
			};
			return this.$postAction(this.$api.getpatientList, {
				userId: this.userInfo.userId,
				patriRelationCode: 7,
				seachName: this.seachName,
				realName: this.seachName,
				...param
			}).then(da => {
				if (this.mescroll.num == 1) this.accountList = []; //如果是第一页需手动制空列表
				if (da.list && da.list.length > 0) {
					let curPageData = da.list;
					this.mescroll.endBySize(curPageData.length, da.total);
					return curPageData;
				} else {
					this.mescroll.endSuccess(0, false);
					return [];
				}
			});
		},
		getAgeByBirthday(strDay) {
			let age = getAgeByBirthday(strDay);
			return age + '岁';
		}
	}
};
</script>

<style lang="scss">
page,
.page-view {
	height: 100%;
	width: 100%;
	background: #f7f7fc;
	box-sizing: border-box;
	padding-bottom: calc(30upx + env(safe-area-inset-bottom) / 2);
}

.topwrap {
	background: #fff;
	padding: 20rpx;
}

.account-list {
	min-height: 0;
	overflow: auto;

	.account-item {
		color: #1c2023;
		font-size: 24upx;
		z-index: 999;
		margin: 30upx 30upx 0;
		padding: 30rpx;
		position: relative;
		background: #fff;
		border-radius: 16upx;

		.name {
			font-size: 32upx;
			margin-right: 10upx;
			font-weight: 600;
		}

		.account {
			font-size: 30upx;
			margin-top: 10upx;
			color: #36374d;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 10upx;
			}
		}

		.tips {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 10upx 20upx 10upx 20upx;
			font-size: 30upx;
			background: $u-primary;
			border-radius: 30upx 0 20upx 0;
			color: #fff;
		}

		& + .stu-item {
			margin-top: 20upx;
		}
	}
}

.addBtn {
	border: 2upx solid $u-primary;
	line-height: 80upx;
	height: 80upx;
	text-align: center;
	color: $u-primary;
	font-size: 34upx;
	border-radius: 20upx;
	background: #fff;
	margin: 30upx 30upx 0;
}
</style>
